<!DOCTYPE html>
<!-- saved from url=(0058)http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>珠峰架构师成长计划</title>
    <link rel="stylesheet" type="text/css" href="./react-high_files/main.css">
</head>
<body>
<div class="nav" style="height: 81px;">
    <div class="logo">
        
            珠峰架构师成长计划
        
    </div>
<ul><li><a href="http://www.zhufengpeixun.cn/2020/index.html">0.Async</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/0.editor.html">0.editor</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/0.module.html">0.module</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/1.ES2015.html">1.ES2015</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/2.Promise.html">2.Promise</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/3.Node.html">3.Node</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/4.NodeInstall.html">4.NodeInstall</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/5.REPL.html">5.REPL</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/6.NodeCore.html">6.NodeCore</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/7.module&amp;NPM.html">7.module&amp;NPM</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/8.Encoding.html">8.Encoding</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/9.Buffer.html">9.Buffer</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/10.fs.html">10.fs</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/11.Stream-1.html">11.Stream-1</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/11.Stream-2.html">11.Stream-2</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/11.Stream-3.html">11.Stream-3</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/11.Stream-4.html">11.Stream-4</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/12-Network-2.html">12-Network-2</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/12.NetWork-3.html">12.NetWork-3</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/12.Network-1.html">12.Network-1</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/13.tcp.html">13.tcp</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/14.http-1.html">14.http-1</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/14.http-2.html">14.http-2</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/15.compress.html">15.compress</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/16.crypto.html">16.crypto</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/17.process.html">17.process</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/18.yargs.html">18.yargs</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/19.cache.html">19.cache</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/20.action.html">20.action</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/21.https.html">21.https</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/22.cookie.html">22.cookie</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/23.session.html">23.session</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/24.express-1.html">24.express-1</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/24.express-2.html">24.express-2</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/24.express-3.html">24.express-3</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/24.express-4.html">24.express-4</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/25.koa-1.html">25.koa-1</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/26.webpack-1-basic.html">26.webpack-1-basic</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/26.webpack-2-optimize.html">26.webpack-2-optimize</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/26.webpack-3-file.html">26.webpack-3-file</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/26.webpack-4.tapable.html">26.webpack-4.tapable</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/26.webpack-5-AST.html">26.webpack-5-AST</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/26.webpack-6-sources.html">26.webpack-6-sources</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/26.webpack-7-loader.html">26.webpack-7-loader</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/26.webpack-8-plugin.html">26.webpack-8-plugin</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/26.webpack-9-hand.html">26.webpack-9-hand</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/26.webpack-10-prepare.html">26.webpack-10-prepare</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/28.redux.html">28.redux</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/28.redux-jwt-back.html">28.redux-jwt-back</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/28.redux-jwt-front.html">28.redux-jwt-front</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/29.mongodb-1.html">29.mongodb-1</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/29.mongodb-2.html">29.mongodb-2</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/29.mongodb-3.html">29.mongodb-3</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/29.mongodb-4.html">29.mongodb-4</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/29.mongodb-5.html">29.mongodb-5</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/29.mongodb-6.html">29.mongodb-6</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/30.cms-1-mysql.html">30.cms-1-mysql</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/30.cms-2-mysql.html">30.cms-2-mysql</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/30.cms-3-mysql.html">30.cms-3-mysql</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/30.cms-4-nunjucks.html">30.cms-4-nunjucks</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/30.cms-5-mock.html">30.cms-5-mock</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/30.cms-6-egg.html">30.cms-6-egg</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/30.cms-7-api.html">30.cms-7-api</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/30.cms-8-roadhog.html">30.cms-8-roadhog</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/30.cms-9-yaml.html">30.cms-9-yaml</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/30.cms-10-umi.html">30.cms-10-umi</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/30.cms-12-dva.html">30.cms-12-dva</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/30.cms-13-dva-ant.html">30.cms-13-dva-ant</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/30.cms-14-front.html">30.cms-14-front</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/30.cms-15-deploy.html">30.cms-15-deploy</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/31.dva.html">31.dva</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/31.cms-13-dva-antdesign.html">31.cms-13-dva-antdesign</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/33.redis.html">33.redis</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/34.unittest.html">34.unittest</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/35.jwt.html">35.jwt</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/36.websocket-1.html">36.websocket-1</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/36.websocket-2.html">36.websocket-2</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/38.chat-api-1.html">38.chat-api-1</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/38.chat-api-2.html">38.chat-api-2</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/38.chat-3.html">38.chat-3</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/38.chat-api-3.html">38.chat-api-3</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/38.chat.html">38.chat</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/38.chat2.html">38.chat2</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/38.chat2.html">38.chat2</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/39.crawl-0.html">39.crawl-0</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/39.crawl-1.html">39.crawl-1</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/39.crawl-2.html">39.crawl-2</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/40.deploy.html">40.deploy</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/41.safe.html">41.safe</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/42.test.html">42.test</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/43.nginx.html">43.nginx</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/44.enzyme.html">44.enzyme</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/45.docker.html">45.docker</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/46.elastic.html">46.elastic</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/47.oauth.html">47.oauth</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/48.wxpay.html">48.wxpay</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/index.html">index</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/51.typescript.html">51.typescript</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/52.UML.html">52.UML</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/53.design.html">53.design</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/index.html">index</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/54.linux.html">54.linux</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/57.ts.html">57.ts</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/56.react-ssr.html">56.react-ssr</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/58.ts_react.html">58.ts_react</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/59.ketang.html">59.ketang</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/59.ketang2.html">59.ketang2</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/61.1.devops-linux.html">61.1.devops-linux</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/61.2.devops-vi.html">61.2.devops-vi</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/61.3.devops-user.html">61.3.devops-user</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/61.4.devops-auth.html">61.4.devops-auth</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/61.5.devops-shell.html">61.5.devops-shell</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/61.6.devops-install.html">61.6.devops-install</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/61.7.devops-system.html">61.7.devops-system</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/61.8.devops-service.html">61.8.devops-service</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/61.9.devops-network.html">61.9.devops-network</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/61.10.devops-nginx.html">61.10.devops-nginx</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/61.11.devops-docker.html">61.11.devops-docker</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/61.12.devops-jekins.html">61.12.devops-jekins</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/61.13.devops-groovy.html">61.13.devops-groovy</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/61.14.devops-php.html">61.14.devops-php</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/61.15.devops-java.html">61.15.devops-java</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/61.16.devops-node.html">61.16.devops-node</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/61.17.devops-k8s.html">61.17.devops-k8s</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/62.1.react-basic.html">62.1.react-basic</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/62.2.react-state.html">62.2.react-state</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/62.3.react-high.html">62.3.react-high</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/62.4.react-optimize.html">62.4.react-optimize</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/62.5.react-hooks.html">62.5.react-hooks</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/62.6.react-immutable.html">62.6.react-immutable</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/62.7.react-mobx.html">62.7.react-mobx</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/62.8.react-source.html">62.8.react-source</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/63.1.redux.html">63.1.redux</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/63.2.redux-middleware.html">63.2.redux-middleware</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/63.3.redux-hooks.html">63.3.redux-hooks</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/63.4.redux-saga.html">63.4.redux-saga</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/63.5.redux-saga-hand.html">63.5.redux-saga-hand</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/64.1.router.html">64.1.router</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/64.2.router-connected.html">64.2.router-connected</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/65.1.typescript.html">65.1.typescript</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/65.2.typescript.html">65.2.typescript</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/65.3.typescript.html">65.3.typescript</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/65.4.antd.html">65.4.antd</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/65.4.definition.html">65.4.definition</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/66-1.vue-base.html">66-1.vue-base</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/66-2.vue-component.html">66-2.vue-component</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/66-3.vue-cli3.0.html">66-3.vue-cli3.0</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/66-4.$message%E7%BB%84%E4%BB%B6.html">66-4.$message组件</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/66-5.Form%E7%BB%84%E4%BB%B6.html">66-5.Form组件</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/66-6.tree.html">66-6.tree</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/66-7.vue-router-apply.html">66-7.vue-router-apply</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/66-8.axios-apply.html">66-8.axios-apply</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/66-9.vuex-apply.html">66-9.vuex-apply</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/66-10.jwt-vue.html">66-10.jwt-vue</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/66-11.vue-ssr.html">66-11.vue-ssr</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/66-12.nuxt-apply.html">66-12.nuxt-apply</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/66-13.pwa.html">66-13.pwa</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/66-14.vue%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95.html">66-14.vue单元测试</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/66-15.%E6%9D%83%E9%99%90%E6%A0%A1%E9%AA%8C.html">66-15.权限校验</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/67-1-network.html">67-1-network</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/68-2-wireshark.html">68-2-wireshark</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/7.npm2.html">7.npm2</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/69-hooks.html">69-hooks</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/70-deploy.html">70-deploy</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/71-hmr.html">71-hmr</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/72.deploy.html">72.deploy</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/73.import.html">73.import</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/74.mobile.html">74.mobile</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/75.webpack-1.%E6%96%87%E4%BB%B6%E5%88%86%E6%9E%90.html">75.webpack-1.文件分析</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/75.webpack-2.loader.html">75.webpack-2.loader</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/75.webpack-3.%E6%BA%90%E7%A0%81%E6%B5%81%E7%A8%8B.html">75.webpack-3.源码流程</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/75.webpack-4.tapable.html">75.webpack-4.tapable</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/75.webpack-6.%E5%AE%9E%E7%8E%B0.html">75.webpack-6.实现</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/76.react_optimize.html">76.react_optimize</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/77.ts_ketang_back.html">77.ts_ketang_back</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/77.ts_ketang_front.html">77.ts_ketang_front</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/78.vue-domdiff.html">78.vue-domdiff</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/79.grammar.html">79.grammar</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/80.tree.html">80.tree</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/81.axios.html">81.axios</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.1.react.html">82.1.react</a></li><li class="active"><a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html">82.2.react-high</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.3.react-router.html">82.3.react-router</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.4.redux.html">82.4.redux</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.5.redux_middleware.html">82.5.redux_middleware</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.6.connected.html">82.6.connected</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.7.saga.html">82.7.saga</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.8.dva.html">82.8.dva</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.8.dva-source.html">82.8.dva-source</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.9.roadhog.html">82.9.roadhog</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.10.umi.html">82.10.umi</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.11.antdesign.html">82.11.antdesign</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.12.ketang-front.html">82.12.ketang-front</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.12.ketang-back.html">82.12.ketang-back</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/83.upload.html">83.upload</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/84.graphql.html">84.graphql</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/85.antpro.html">85.antpro</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/86.1.uml.html">86.1.uml</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/86.2.design.html">86.2.design</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/87.postcss.html">87.postcss</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/88.react16-1.html">88.react16-1</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/89.nextjs.html">89.nextjs</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/90.react-test.html">90.react-test</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/91.react-ts.html">91.react-ts</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/92.rbac.html">92.rbac</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/93.tsnode.html">93.tsnode</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/94.1.JavaScript.html">94.1.JavaScript</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/94.2.JavaScript.html">94.2.JavaScript</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/94.3.MODULE.html">94.3.MODULE</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/94.4.EventLoop.html">94.4.EventLoop</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/94.5.%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0.html">94.5.文件上传</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/94.6.https.html">94.6.https</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/94.7.%20nginx.html">94.7. nginx</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/95.1.%20react.html">95.1. react</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/95.2.react.html">95.2.react</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/96.1.react16.html">96.1.react16</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/96.2.fiber.html">96.2.fiber</a></li></ul></div>


<div class="warpper">

    <div class="page-toc">
        <ul><li><a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t01.Context(%E4%B8%8A%E4%B8%8B%E6%96%87)">1.Context(上下文)</a><ul><li><a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t11.1%20%E4%BD%BF%E7%94%A8">1.1 使用</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t21.2%20%E5%AE%9E%E7%8E%B0">1.2 实现</a></li></ul></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t32.%20%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6">2. 高阶组件</a><ul><li><a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t42.1%20%E6%97%A5%E5%BF%97%E7%BB%84%E4%BB%B6">2.1 日志组件</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t52.2%20%E5%A4%9A%E5%B1%82%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6">2.2 多层高阶组件</a><ul><li><a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t62.2.1%20%E4%BB%8ElocalStorage%E4%B8%AD%E5%8A%A0%E8%BD%BD">2.2.1 从localStorage中加载</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t72.2.2%20%E4%BB%8Eajax%E4%B8%AD%E5%8A%A0%E8%BD%BD">2.2.2 从ajax中加载</a></li></ul></li></ul></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t83.%20render%20props">3. render props</a><ul><li><a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t93.1%20%E5%8E%9F%E7%94%9F%E5%AE%9E%E7%8E%B0">3.1 原生实现</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t103.2%20%20children">3.2  children</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t113.3%20render%E5%B1%9E%E6%80%A7">3.3 render属性</a></li><li><a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t123.4%20HOC">3.4 HOC</a></li></ul></li></ul>
    </div>
    
    <div class="content markdown-body">
        <h2 id="t01.Context(上下文)">1.Context(上下文) <a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t01.Context(%E4%B8%8A%E4%B8%8B%E6%96%87)"> # </a></h2>
<ul>
<li>在某些场景下，你想在整个组件树中传递数据，但却不想手动地在每一层传递属性。你可以直接在 React 中使用强大的<code>context</code>API解决上述问题</li>
<li>在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props</li>
</ul>
<p><img src="./react-high_files/contextapi.gif" alt="contextapi"></p>
<h3 id="t11.1 使用">1.1 使用 <a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t11.1%20%E4%BD%BF%E7%94%A8"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span>;
interface PageProps {
}
interface PageState {
    <span class="hljs-attr">color</span>: string
}
interface ContextValue {
    <span class="hljs-attr">color</span>: string;
    changeColor: <span class="hljs-function">(<span class="hljs-params">color: string</span>) =&gt;</span> <span class="hljs-keyword">void</span>
}
<span class="hljs-keyword">let</span> ThemeContext = React.createContext&lt;ContextValue | <span class="hljs-literal">null</span>&gt;(<span class="hljs-literal">null</span>);
<span class="hljs-keyword">let</span> root: HTMLElement | <span class="hljs-literal">null</span> = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'#root'</span>);
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Header</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
    render() {
        <span class="hljs-keyword">return</span> (
            &lt;ThemeContext.Consumer&gt;
                {
                    (value: ContextValue | null) =&gt; (
                        &lt;div style={{ border: `5px solid ${value!.color}`, padding: 5 }}&gt;
                            header
                          &lt;Title /&gt;
                        &lt;/div&gt;
                    )
                }
            &lt;/ThemeContext.Consumer&gt;
        )
    }
}
class Title extends Component {
    render() {
        return (
            &lt;ThemeContext.Consumer&gt;
                {
                    (value: ContextValue | null) =&gt; (
                        &lt;div style={{ border: `5px solid ${value!.color}` }}&gt;
                            title
                        &lt;/div&gt;
                    )
                }
            &lt;/ThemeContext.Consumer&gt;
        )
    }
}
class Main extends Component {
    render() {
        return (
            &lt;ThemeContext.Consumer&gt;
                {
                    (value: ContextValue | null) =&gt; (
                        &lt;div style={{ border: `5px solid ${value!.color}`, margin: 5, padding: 5 }}&gt;
                            main
                        &lt;Content /&gt;
                        &lt;/div&gt;
                    )
                }
            &lt;/ThemeContext.Consumer&gt;
        )
    }
}
class Content extends Component {
    render() {
        return (
            &lt;ThemeContext.Consumer&gt;
                {
                    (value: ContextValue | null) =&gt; (
                        &lt;div style={{ border: `5px solid ${value!.color}`, padding: 5 }}&gt;
                            Content
                            &lt;button onClick={() =&gt; value!.changeColor('red')} style={{ color: 'red' }}&gt;红色&lt;/button&gt;
                            &lt;button onClick={() =&gt; value!.changeColor('green')} style={{ color: 'green' }}&gt;绿色&lt;/button&gt;
                        &lt;/div&gt;
                    )
                }
            &lt;/ThemeContext.Consumer&gt;

        )
    }
}

class Page extends Component&lt;PageProps, PageState&gt; {
    constructor(props: PageProps) {
        super(props);
        this.state = { color: 'red' };
    }
    changeColor = (color: string) =&gt; {
        this.setState({ color });
    }
    render() {
        let contextVal: ContextValue = { changeColor: this.changeColor, color: this.state.color };
        return (
            &lt;ThemeContext.Provider value={contextVal}&gt;
                &lt;div style={{ margin: '10px', border: `5px solid ${this.state.color}`, padding: 5, width: 200 }}&gt;
                    page
                    &lt;Header /&gt;
                    &lt;Main /&gt;
                &lt;/div&gt;
            &lt;/ThemeContext.Provider&gt;

        )
    }
}
ReactDOM.render(&lt;Page /&gt;, root);
</code></pre>
<h3 id="t21.2 实现">1.2 实现 <a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t21.2%20%E5%AE%9E%E7%8E%B0"> # </a></h3>
<pre><code class="lang-diff">import React, { Component } from 'react';
import ReactDOM from 'react-dom';
interface PageProps {
}
interface PageState {
    color: string
}
<span class="hljs-addition">+interface ContextValue {</span>
<span class="hljs-addition">+    color: string;</span>
<span class="hljs-addition">+    changeColor: (color: string) =&gt; void</span>
<span class="hljs-addition">+}</span>
<span class="hljs-addition">+interface ContextProps&lt;T&gt; {</span>
<span class="hljs-addition">+    value: T</span>
<span class="hljs-addition">+}</span>
<span class="hljs-addition">+function createContext() {</span>
<span class="hljs-addition">+    let value;</span>
<span class="hljs-addition">+    function Provider(props) {</span>
<span class="hljs-addition">+        value = props.value;</span>
<span class="hljs-addition">+        Provider.value = value;</span>
<span class="hljs-addition">+        return props.children;</span>
<span class="hljs-addition">+    }</span>
<span class="hljs-addition">+    function Consumer(props) {</span>
<span class="hljs-addition">+        return props.children(value);;</span>
<span class="hljs-addition">+    }</span>
<span class="hljs-addition">+    return {</span>
<span class="hljs-addition">+        Provider,</span>
<span class="hljs-addition">+        Consumer</span>
<span class="hljs-addition">+    }</span>
<span class="hljs-addition">+}</span>
<span class="hljs-addition">+let ThemeContext = createContext&lt;ContextValue | null&gt;(null);</span>
let root: HTMLElement | null = document.querySelector('#root');
class Header extends Component {
    render() {
        return (
            &lt;ThemeContext.Consumer&gt;
                {
                    (value: ContextValue | null) =&gt; (
                        &lt;div style={{ border: `5px solid ${value!.color}`, padding: 5 }}&gt;
                            header
                          &lt;Title /&gt;
                        &lt;/div&gt;
                    )
                }
            &lt;/ThemeContext.Consumer&gt;
        )
    }
}
class Title extends Component {
    render() {
        return (
            &lt;ThemeContext.Consumer&gt;
                {
                    (value: ContextValue | null) =&gt; (
                        &lt;div style={{ border: `5px solid ${value!.color}` }}&gt;
                            title
                        &lt;/div&gt;
                    )
                }
            &lt;/ThemeContext.Consumer&gt;
        )
    }
}
class Main extends Component {
    render() {
        return (
            &lt;ThemeContext.Consumer&gt;
                {
                    (value: ContextValue | null) =&gt; (
                        &lt;div style={{ border: `5px solid ${value!.color}`, margin: 5, padding: 5 }}&gt;
                            main
                        &lt;Content /&gt;
                        &lt;/div&gt;
                    )
                }
            &lt;/ThemeContext.Consumer&gt;
        )
    }
}
class Content extends Component {
    render() {
        return (
            &lt;ThemeContext.Consumer&gt;
                {
                    (value: ContextValue | null) =&gt; (
                        &lt;div style={{ border: `5px solid ${value!.color}`, padding: 5 }}&gt;
                            Content
                            &lt;button onClick={() =&gt; value!.changeColor('red')} style={{ color: 'red' }}&gt;红色&lt;/button&gt;
                            &lt;button onClick={() =&gt; value!.changeColor('green')} style={{ color: 'green' }}&gt;绿色&lt;/button&gt;
                        &lt;/div&gt;
                    )
                }
            &lt;/ThemeContext.Consumer&gt;

        )
    }
}

class Page extends Component&lt;PageProps, PageState&gt; {
    constructor(props: PageProps) {
        super(props);
        this.state = { color: 'red' };
    }
    changeColor = (color: string) =&gt; {
        this.setState({ color });
    }
    render() {
        let contextVal: ContextValue = { changeColor: this.changeColor, color: this.state.color };
        return (
            &lt;ThemeContext.Provider value={contextVal}&gt;
                &lt;div style={{ margin: '10px', border: `5px solid ${this.state.color}`, padding: 5, width: 200 }}&gt;
                    page
                    &lt;Header /&gt;
                    &lt;Main /&gt;
                &lt;/div&gt;
            &lt;/ThemeContext.Provider&gt;

        )
    }
}
ReactDOM.render(&lt;Page /&gt;, root);
</code></pre>
<pre><code class="lang-diff">class Header extends Component {
<span class="hljs-addition">+    static contextType = ThemeContext</span>
    render() {
<span class="hljs-addition">+        this.context = Header.contextType.Provider.value;</span>
        return (
            &lt;div style={{ border: `5px solid ${this.context.color}`, padding: 5 }}&gt;
                Header
                &lt;Title /&gt;
            &lt;/div&gt;
        )
    }
}
</code></pre>
<h2 id="t32. 高阶组件">2. 高阶组件 <a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t32.%20%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6"> # </a></h2>
<ul>
<li>高阶组件就是一个函数，传给它一个组件，它返回一个新的组件</li>
<li>高阶组件的作用其实就是为了组件之间的代码复用</li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> NewComponent = higherOrderComponent(OldComponent)
</code></pre>
<h3 id="t42.1 日志组件">2.1 日志组件 <a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t42.1%20%E6%97%A5%E5%BF%97%E7%BB%84%E4%BB%B6"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> hoistNonReactStatics <span class="hljs-keyword">from</span> <span class="hljs-string">'hoist-non-react-statics'</span>;
<span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span>;
<span class="hljs-keyword">const</span> logger = <span class="hljs-function">(<span class="hljs-params">WrappedComponent: React.FC</span>) =&gt;</span> {
    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">LoggerComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
        start: number | <span class="hljs-literal">null</span> = <span class="hljs-literal">null</span>;
        componentWillMount() {
            <span class="hljs-keyword">this</span>.start = <span class="hljs-built_in">Date</span>.now();
        }
        componentDidMount() {
            <span class="hljs-built_in">console</span>.log((<span class="hljs-built_in">Date</span>.now() - <span class="hljs-keyword">this</span>.start!) + <span class="hljs-string">'ms'</span>)
        }
        render() {
            <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">WrappedComponent</span> /&gt;</span>
        }
    }
    hoistNonReactStatics(LoggerComponent, WrappedComponent);
    return LoggerComponent;
}
let Hello = logger((props) =&gt; <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>hello<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>);
ReactDOM.render(<span class="hljs-tag">&lt;<span class="hljs-name">Hello</span> /&gt;</span>, document.getElementById('root'));
</span></code></pre>
<h3 id="t52.2 多层高阶组件">2.2 多层高阶组件 <a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t52.2%20%E5%A4%9A%E5%B1%82%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6"> # </a></h3>
<h4 id="t62.2.1 从localStorage中加载">2.2.1 从localStorage中加载 <a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t62.2.1%20%E4%BB%8ElocalStorage%E4%B8%AD%E5%8A%A0%E8%BD%BD"> # </a></h4>
<ul>
<li><code>localStorage</code>中有<code>username=zhansan</code></li>
<li>从<code>localStorage</code>中根据key加载对应的值</li>
</ul>
<pre><code class="lang-js">localStorage.setItem(<span class="hljs-string">'username'</span>,<span class="hljs-string">'zhangsan'</span>);
</code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span>;
interface WrappedComponentProps {
    <span class="hljs-attr">value</span>: string;
}

<span class="hljs-keyword">const</span> fromLocal = <span class="hljs-function">(<span class="hljs-params">WrappedComponent: React.FC&lt;WrappedComponentProps&gt; | React.ComponentClass&lt;WrappedComponentProps&gt;</span>) =&gt;</span> {
    interface FromLocalComponentProps { <span class="hljs-comment">//最终返回的组件的属性对象</span>
        field: string
    }
    interface State {  <span class="hljs-comment">//状态对象</span>
        value: string;
    }
    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">FromLocalComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span>&lt;<span class="hljs-title">FromLocalComponentProps</span>, <span class="hljs-title">State</span>&gt; </span>{
        <span class="hljs-keyword">constructor</span>(props: FromLocalComponentProps) {
            <span class="hljs-keyword">super</span>(props);
            <span class="hljs-keyword">this</span>.state = { <span class="hljs-attr">value</span>: <span class="hljs-string">''</span> };
        }
        componentWillMount() {
            <span class="hljs-keyword">let</span> value: string | <span class="hljs-literal">null</span> = localStorage.getItem(<span class="hljs-keyword">this</span>.props.field);
            <span class="hljs-keyword">if</span> (value)
                <span class="hljs-keyword">this</span>.setState({ value });
        }
        render() {
            <span class="hljs-keyword">return</span> &lt;WrappedComponent value={this.state.value} /&gt;
        }
    }
    return FromLocalComponent;
}

const UserName = (props: WrappedComponentProps) =&gt; (
    &lt;input defaultValue={props.value} /&gt;
)
const UserNameFromLocal = fromLocal(UserName);

ReactDOM.render(&lt;UserNameFromLocal field="username" /&gt;, document.getElementById('root'));
</code></pre>
<h4 id="t72.2.2 从ajax中加载">2.2.2 从ajax中加载 <a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t72.2.2%20%E4%BB%8Eajax%E4%B8%AD%E5%8A%A0%E8%BD%BD"> # </a></h4>
<ul>
<li>如果我们得到的用户名<code>zhangsan</code>,但是要显示中文张三，需要包裹二次</li>
<li>包裹的时候是从内往外一层层包裹</li>
<li>渲染的时候是从外往内渲染</li>
</ul>
<pre><code class="lang-diff">import React, { Component } from 'react';
import ReactDOM from 'react-dom';
interface WrappedComponentProps {
    value: string;
}

<span class="hljs-addition">+const fromLocal = (WrappedComponent: React.ComponentClass&lt;WrappedComponentProps&gt;) =&gt; {</span>
    interface FromLocalComponentProps { //最终返回的组件的属性对象
        field: string
    }
    interface State {  //状态对象
        value: string;
    }
    class FromLocalComponent extends Component&lt;FromLocalComponentProps, State&gt; {
        constructor(props: FromLocalComponentProps) {
            super(props);
            this.state = { value: '' };
        }
        componentWillMount() {
            let value: string | null = localStorage.getItem(this.props.field);
            if (value)
                this.setState({ value });
        }
        render() {
            return &lt;WrappedComponent value={this.state.value} /&gt;
        }
    }
    return FromLocalComponent;
}
<span class="hljs-addition">+const fromAjax = (WrappedComponent: React.FC&lt;WrappedComponentProps&gt;) =&gt; {</span>
<span class="hljs-addition">+    interface FromAjaxComponentProps { //最终返回的组件的属性对象</span>
<span class="hljs-addition">+        value: string</span>
<span class="hljs-addition">+    }</span>
<span class="hljs-addition">+    interface State {</span>
<span class="hljs-addition">+        value: string;</span>
<span class="hljs-addition">+    }</span>

<span class="hljs-addition">+    class FromAjaxComponent extends Component&lt;FromAjaxComponentProps, State&gt; {</span>
<span class="hljs-addition">+        constructor(props: WrappedComponentProps) {</span>
<span class="hljs-addition">+            super(props);</span>
<span class="hljs-addition">+            this.state = { value: '' };</span>
<span class="hljs-addition">+        }</span>
<span class="hljs-addition">+        componentDidMount() {</span>
<span class="hljs-addition">+            fetch(`/translate.json`).then(response =&gt; response.json()).then((data) =&gt; {</span>
<span class="hljs-addition">+                let value = data[this.props.value];</span>
<span class="hljs-addition">+                this.setState({ value });</span>
<span class="hljs-addition">+            });</span>
<span class="hljs-addition">+        }</span>
<span class="hljs-addition">+        render() {</span>
<span class="hljs-addition">+            return &lt;WrappedComponent value={this.state.value} /&gt;</span>
<span class="hljs-addition">+        }</span>
<span class="hljs-addition">+    }</span>
<span class="hljs-addition">+    return FromAjaxComponent;</span>
<span class="hljs-addition">+}</span>
<span class="hljs-addition">+const UserName = (props: WrappedComponentProps) =&gt; (</span>
<span class="hljs-addition">+    &lt;input defaultValue={props.value} /&gt;</span>
<span class="hljs-addition">+)</span>
<span class="hljs-addition">+const UserNameFromAjax = fromAjax(UserName);</span>
<span class="hljs-addition">+const UserNameFromLocal = fromLocal(UserNameFromAjax);</span>

ReactDOM.render(&lt;UserNameFromLocal field="username" /&gt;, document.getElementById('root'));
</code></pre>
<h2 id="t83. render props">3. render props <a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t83.%20render%20props"> # </a></h2>
<ul>
<li><a href="https://zh-hans.reactjs.org/docs/render-props.html">render-props</a></li>
<li><code>render prop</code> 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术</li>
<li>具有 render prop 的组件接受一个函数，该函数返回一个 React 元素并调用它而不是实现自己的渲染逻辑</li>
<li>render prop 是一个用于告知组件需要渲染什么内容的函数 prop</li>
<li>这也是逻辑复用的一种方式</li>
</ul>
<pre><code class="lang-js">&lt;DataProvider render={data =&gt; (
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello {data.target}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>
)}/&gt;
</code></pre>
<h3 id="t93.1 原生实现">3.1 原生实现 <a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t93.1%20%E5%8E%9F%E7%94%9F%E5%AE%9E%E7%8E%B0"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span>;
interface Props {

}
interface State {
    <span class="hljs-attr">x</span>: number;
    y: number;
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MouseTracker</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>, <span class="hljs-title">State</span>&gt; </span>{
    <span class="hljs-keyword">constructor</span>(props: Props) {
        <span class="hljs-keyword">super</span>(props);
        <span class="hljs-keyword">this</span>.state = { <span class="hljs-attr">x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">0</span> };
    }

    handleMouseMove = <span class="hljs-function">(<span class="hljs-params">event: React.MouseEvent&lt;HTMLDivElement&gt;</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.setState({
            <span class="hljs-attr">x</span>: event.clientX,
            <span class="hljs-attr">y</span>: event.clientY
        });
    }

    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">onMouseMove</span>=<span class="hljs-string">{this.handleMouseMove}</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>移动鼠标!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>当前的鼠标位置是 ({this.state.x}, {this.state.y})<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
        );
    }
}
ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">MouseTracker</span> /&gt;</span>, document.getElementById('root'));
</span></code></pre>
<h3 id="t103.2  children">3.2  children <a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t103.2%20%20children"> # </a></h3>
<ul>
<li>children是一个渲染的方法</li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span>;

interface State {
    <span class="hljs-attr">x</span>: number;
    y: number;
}
interface Props {
    <span class="hljs-attr">children</span>: <span class="hljs-function">(<span class="hljs-params">state: State</span>) =&gt;</span> React.ReactNode
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MouseTracker</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>, <span class="hljs-title">State</span>&gt; </span>{
    <span class="hljs-keyword">constructor</span>(props: Props) {
        <span class="hljs-keyword">super</span>(props);
        <span class="hljs-keyword">this</span>.state = { <span class="hljs-attr">x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">0</span> };
    }

    handleMouseMove = <span class="hljs-function">(<span class="hljs-params">event: React.MouseEvent&lt;HTMLDivElement&gt;</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.setState({
            <span class="hljs-attr">x</span>: event.clientX,
            <span class="hljs-attr">y</span>: event.clientY
        });
    }

    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">onMouseMove</span>=<span class="hljs-string">{this.handleMouseMove}</span>&gt;</span>
                {this.props.children(this.state)}
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
        );
    }
}
ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">MouseTracker</span> &gt;</span>
    {
        (props: State) =&gt; (
            <span class="hljs-tag">&lt;&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>移动鼠标!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>当前的鼠标位置是 ({props.x}, {props.y})<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
            <span class="hljs-tag">&lt;/&gt;</span>
        )
    }
<span class="hljs-tag">&lt;/<span class="hljs-name">MouseTracker</span> &gt;</span>, document.getElementById('root'));
</span></code></pre>
<h3 id="t113.3 render属性">3.3 render属性 <a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t113.3%20render%E5%B1%9E%E6%80%A7"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span>;
interface Props {
    <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">state: State</span>) =&gt;</span> React.ReactNode
}
interface State {
    <span class="hljs-attr">x</span>: number;
    y: number;
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MouseTracker</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>, <span class="hljs-title">State</span>&gt; </span>{
    <span class="hljs-keyword">constructor</span>(props: Props) {
        <span class="hljs-keyword">super</span>(props);
        <span class="hljs-keyword">this</span>.state = { <span class="hljs-attr">x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">0</span> };
    }

    handleMouseMove = <span class="hljs-function">(<span class="hljs-params">event: React.MouseEvent&lt;HTMLDivElement&gt;</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.setState({
            <span class="hljs-attr">x</span>: event.clientX,
            <span class="hljs-attr">y</span>: event.clientY
        });
    }

    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">onMouseMove</span>=<span class="hljs-string">{this.handleMouseMove}</span>&gt;</span>
                {this.props.render(this.state)}
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
        );
    }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt; <span class="hljs-attr">MouseTracker</span> <span class="hljs-attr">render</span>=<span class="hljs-string">{params</span> =&gt;</span> (
    <span class="hljs-tag">&lt;&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>移动鼠标!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>当前的鼠标位置是 ({params.x}, {params.y})<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;/&gt;</span>
)} /&gt;, document.getElementById('root'));
</span></code></pre>
<h3 id="t123.4 HOC">3.4 HOC <a href="http://www.zhufengpeixun.cn/2020/html/82.2.react-high.html#t123.4%20HOC"> # </a></h3>
<pre><code class="lang-diff">import React, { Component } from 'react';
import ReactDOM from 'react-dom';
interface Props {
    render: (state: State) =&gt; React.ReactNode
}
interface State {
    x: number;
    y: number;
}
class MouseTracker extends React.Component&lt;Props, State&gt; {
    constructor(props: Props) {
        super(props);
        this.state = { x: 0, y: 0 };
    }

    handleMouseMove = (event: React.MouseEvent&lt;HTMLDivElement&gt;) =&gt; {
        this.setState({
            x: event.clientX,
            y: event.clientY
        });
    }

    render() {
        return (
            &lt;div onMouseMove={this.handleMouseMove}&gt;
                {this.props.render(this.state)}
            &lt;/div&gt;
        );
    }
}
<span class="hljs-addition">+function withMouse(Component: React.FC&lt;State&gt;) {</span>
<span class="hljs-addition">+    return (</span>
<span class="hljs-addition">+        (props: State) =&gt; &lt;MouseTracker render={mouse =&gt; &lt;Component {...props} {...mouse} /&gt;} /&gt;</span>
<span class="hljs-addition">+    )</span>
<span class="hljs-addition">+}</span>
<span class="hljs-addition">+let App = withMouse((props: State) =&gt; (</span>
<span class="hljs-addition">+    &lt;&gt;</span>
<span class="hljs-addition">+        &lt;h1&gt;移动鼠标!&lt;/h1&gt;</span>
<span class="hljs-addition">+        &lt;p&gt;当前的鼠标位置是 ({props.x}, {props.y})&lt;/p&gt;</span>
<span class="hljs-addition">+    &lt;/&gt;</span>
<span class="hljs-addition">+));</span>
ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
</code></pre>

        <div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org/">Node.js</a> run.</div>
    </div>
    
</div>

<script src="./react-high_files/jquery.js"></script>
<script>
$('.warpper .page-toc ul ul li a').on('click',function(){
  $('.warpper .page-toc ul ul li a').removeClass('my-active')
  $(this).addClass('my-active')
})

$('.logo').on('mouseenter',function(){
  $('.nav').height('450px');
})
$('.nav').on('mouseleave',function(){
  $('.nav').height('80px');
})
$('.logo').on('click',function(){
  $('.nav').css('display','none');
 $('.warpper').css('padding','0px');
})
// if (!$('.understand-me').length) {
  //   var bar = $(window).height() - $('.navbar ').height() - $('.page-toc').position().top;
  //   var count = bar / 26 / 2;
  //   var barHeight = $('.page-toc').outerHeight();
  //   $('.page-toc li').eq(0).children('a').addClass('red');
  //   var arr = [];
  //   $("h1,h2,h3,h4,h5,h6").each(function () {
  //     arr.push($(this).position().top);
  //   });
  //   var timer
  //   function dark() {
  //     clearTimeout(timer)
  //      timer = setTimeout(function () {
  //      var top = Math.abs($('.page-toc > ul').position().top);
  //      var cur = $('.content').scrollTop();
  //      for (var i = arr.length; i >= 0; i--) {
  //        if (arr[i] <= cur) {
  //          break;
  //        }
  //      }
  //      if (i === -1) {
  //        i = 0;
  //      }
  //      $('.page-toc li a').removeClass('red');
  //      $('.page-toc li').eq(i).children('a').addClass('red');
  //      let height = $('.page-toc li').eq(i).position().top-$('.page-toc').height(); // 如果当前的offset出去了 回到中间可好？
  //      $('.page-toc').scrollTop(height+$('.page-toc').height()/2);
  //    },200)
  //   }

  //   $('.content').on('scroll', dark);
  // }
</script>
<style>

    /* ::-webkit-scrollbar{width:14px;}
    ::-webkit-scrollbar-track{background-color:transparent;}
    ::-webkit-scrollbar-thumb{background-color:transparent;}
    ::-webkit-scrollbar-thumb:hover {background-color:transparent}
    ::-webkit-scrollbar-thumb:active {background-color:transparent} */

    .page-toc > ul .red {
        background: #f3f3f3;
        z-index: 1;
        border-left: 3px solid #009a61;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        color: #000
    }





</style>


</body></html>